window.addEventListener('load',function(){
let id = location.search.split('=')[1];
 let laypage;
//  评论分页
let plPage = location.hash.replace('#!fenye=', '') || 1;
let plPageSize = 5;
let plTotals = 0;
songListDetails();
zuire();
zuixin();
     fetch(`http://39.96.88.57:9090/api/www/album/albumInfo?albumId=${id}&pn=1&rn=20&httpsStatus=1&reqId=d9aaaa30-deb9-11ed-8a5f-f50fbdab61a0`).then(res=>res.json()).then(res=>{
     infoL.innerHTML+=`  
     <div class="cover_out">
            <img src="${res.data.pic}"
                class="coverImg" alt="">
        </div>
        <p class="intr">专辑简介</p>
        <p class="intr_txt">${res.data.albuminfo}</p>
        <div>
            <a href="javascript:;" class="download laodss bg_primary">
                <i></i>
                下载该专辑
            </a>
        </div>
        <div class="qrcode-container">
            <img src="https://h5static.kuwo.cn/www/kw-www/img/qrcode.d53daff.png" alt="">
            <p>手机扫描二维码下载客户端</p>
        </div>
          <div class="model">
                    <div class="tits">
                        <span>提示</span>
                        <i></i>
                    </div>
                    <div>
                        <p class="tips">下载专辑，请在酷我音乐客户端操作</p>
                    </div>
                    <div class="btnss">
                        <a href="kuwo://play">已安装酷我音乐</a>
                        <a href="http://down.kuwo.cn/mbox/kwmusic_web_6.exe" class="loads">下载酷我音乐</a>
                    </div>
                </div>
    `   
    conr.innerHTML+=`
     <div id="conrTitle">
                         <span class="title" title="${res.data.album}">${res.data.album}</span>
                            <p class="artist_name flex">
                                <span>${res.data.artist}</span>
                            </p>
                              <p class="song_info">
                                <span>语种: </span>
                                <span class="tip album_name" title="${res.data.lang}">${res.data.album}</span>
                                <span>发行时间: </span>
                                <span class="tip album_name">${res.data.releaseDate}</span>
                            </p>
                        </div>
                        <div class="btns">
                            <button class="bg_primary">
                                <i class="i1"></i>
                                <span>播放全部</span>
                            </button>
                            <button>
                                <i class="i2"></i>
                                <span>添加</span>
                            </button>
                            <button>
                                <i class="i3"></i>
                                <span>收藏</span>
                            </button>
                            <button>
                                <i class="i5"></i>
                                <span>分享</span>
                            </button>

                            <a href="#comment_on">
                                <i class="i4"></i>
                                <span>评论</span>
                            </a>

                        </div>
                        <ul class="flex head_Ul">
                            <li class="head_num">序号</li>
                            <li class="head_name">歌曲</li>
                            <li class="head_artist">歌手</li>
                            <li class="head_time">时长</li>
                        </ul>
    `

      // 点击下载歌单
    $('.laodss').click(function(){
        $('.model').toggle()
    })
    $('.tits i').click(function(){
        $('.model').hide()
    })
    })

   function songListDetails(){
     fetch(`http://39.96.88.57:9090/api/www/album/albumInfo?albumId=${id}&pn=1&rn=20&httpsStatus=1&reqId=9914d290-debc-11ed-95c0-1117dfcb7683`).then(res=>res.json()).then(res=>{
     albumList.innerHTML='';
    res.data.musicList.forEach((item,index) => {
        console.log(item);
            albumList.innerHTML+=`
              <li class="song_item flex">
                                <div class="song_rank flex">
                                    <div class="rank_num">
                                        <span class="playing">
                                            <span class="side1 pause"></span>
                                            <span class="side2 pause"></span>
                                            <span class="side3 pause"></span>
                                        </span>
                                        <span>${index+1}</span>
                                    </div>
                                </div>
                                <div class="song_name flex">
                                    <a href="./lyrics.html?id=${item.rid}" title="${item.name}" class="name">${item.name}</a>
                                    <i class="type2">无损</i>
                                    <i class="has_mv">MV</i>
                                </div>
                                <div class="song_artist">
                                   <a href="./singerDetails.html?id=${item.artistid}"><span title="${item.artist}">${item.artist}</span></a>
                                </div>
                                <div class="song_album">
                                    <span title="${item.album}">${item.album}</span>
                                </div>
                                <div class="song_opts flex">
                                    <i></i>
                                    <i></i>
                                    <i></i>
                                    <i></i>
                                </div>
                                <div class="song_time">
                                    <span>${item.songTimeMinutes}</span>
                                </div>

                            </li>
            `
    });
    })
   }


// 最热评论
function zuire(){
fetch(`http://39.96.88.57:9090/comment?type=get_rec_comment&f=web&page=${plPage}&rows=${plPageSize}&digest=13&sid=${id}&uid=0&prod=newWeb&httpsStatus=1&reqId=992dd8d0-debc-11ed-95c0-1117dfcb7683`).then(r => r.json()).then(res => {
   allS1.innerHTML=''
   allS1.innerHTML+=`
   ${res.total?`<div class="type"><span>热门评论</span> <span class="comment-num">${res.total+'条'}</span></div>`:``}
           `
              res.rows.forEach((item,index)=>{
                if(index<5){
                    allS1.innerHTML+=`
                   <div class="each-comment" id="eachComment">
                    <div class="each-comment-avatar"><img alt=""
                                    data-src="http://q.qlogo.cn/qqapp/100243533/4BDAC75DED25461B51510E9B31D006F9/100"
                                    src="${item.u_pic?item.u_pic:"./images/NotLoad.png"}"
                                    lazy="loaded"></div>
                            <div class="each-comment-msg">
                                <div class="each-comment-nickname"><span>${item.u_name}</span> <i class=""></i></div>
                                <div class="each-comment-content text-selection">${item.msg}</div>
                                ${item.reply?` <div class="each-reply-content"><a href="javascript:;" class="reply-name">${item.reply?'@'+item.reply.u_name:''}</a> <span
                                class="text-selection" title="${item.reply?'':item.msg}">${item.reply?item.reply.msg:''}</span></div>`:''}
                                <div class="each-comment-time">
                                    <div class="time">
                                      ${item.time}
                                    </div>
                                </div>
                            </div>
                               </div>
                  `
                }
              })
plRender();
            })
}
 // 最新评论      
function zuixin(){
fetch(`http://39.96.88.57:9090/comment?type=get_comment&f=web&page=${plPage}&rows=${plPageSize}&digest=13&sid=${id}&uid=0&prod=newWeb&httpsStatus=1&reqId=9940c490-debc-11ed-95c0-1117dfcb7683`).then(r => r.json()).then(res => {
          plTotals = res.total;
            allS2.innerHTML='';
           allS2.innerHTML+=`
            ${res.total?`<div class="type"><span>最新评论</span> <span class="comment-num">${res.total+'条'}</span></div>`:`<div class="nodata flex">
                            <div class="inner">
                                <img src="https://h5static.kuwo.cn/www/kw-www/img/introduce_grey.f18848f.png"
                                   alt="">
                                <div class="tipp">暂无评论</div>
                            </div>
                        </div>${plPagingTest.innerHTML=''}`}
           ` 
              res.rows.forEach((item,index)=>{
                if(index<5){
                    allS2.innerHTML+=`
                   <div class="each-comment" id="eachComment">
                    <div class="each-comment-avatar"><img alt=""
                                    data-src="./images/NotLoad.png"
                                    src="${item.u_pic?item.u_pic:"./images/NotLoad.png"}"
                                    lazy="loaded"></div>
                            <div class="each-comment-msg">
                                <div class="each-comment-nickname"><span>${item.u_name}</span> <i class=""></i></div>
                                ${item.reply?'':`<div class="each-comment-content text-selection"><span title="${item.reply?'':item.msg}">${item.reply?'':item.msg}</span></div>`}
                                ${item.reply?`<div class="each-comment-content text-selection"><a href="javascript:;" class="reply-name">${item.reply?'回复@'+item.reply.u_name:''}</span></a> <span class="">${item.reply?item.msg:''}</span></div>`:''}
                                 ${item.reply?`<div class="each-reply-content"><span class="text-selection">${item.reply?item.reply.msg:''}</span></div>`:''}
                                <div class="each-comment-time">
                                    <div class="time">
                                      ${item.time}
                                    </div>
                                </div>
                            </div>
                               </div>
                  `
                }
              })
              plRender();
            })
}      

// 分页
       


// 歌曲分页

// 评论分页
 plRender()
function plRender() {
            layui.use('laypage', function () {
                 laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'plPagingTest' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: plTotals, //数据总数，从服务端得到
                    limit: plPageSize,
                    prev: "<",
                    next: ">",
                    groups: 3,
                    hash: 'fenye',
                    curr: location.hash.replace('#!fenye=', ''),
                    layout: ["prev", "page", "next"],
                    theme: '#ffdf1f',
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            plPage = obj.curr;
                            plPageSize = obj.limit;
                            zuire();
                            zuixin();
                        }
                    }

                });
            });
}

})